<template>
 <div>
 <TodoHeader @addHandle="add"></TodoHeader>
 <TodoMain :list="list" @del="delHandle"></TodoMain>
 <TodoFooter :list="list" @clearHandle="list=[]"></TodoFooter>
 </div>
</template>
<script>
import TodoHeader from './txt/TodoHeader.vue';
import TodoMain from './txt/TodoMain.vue';
import TodoFooter from './txt/TodoFooter.vue';
export default{
    name:'',
    components:{
      TodoHeader,
      TodoMain,
      TodoFooter
    },
    data () {
        return {
          // list:[
          //   {id:1,name:'跑步一公里'},
          //   {id:2,name:'游泳100米'},
          //   {id:3,name:'跳绳100个'}
          // ]
          list:JSON.parse(localStorage.getItem('list')) || [
            {id:1,name:'跑步一公里'},
            {id:2,name:'游泳100米'},
            {id:3,name:'跳绳100个'}
          ]
        }
    },
    watch:{
      list(newVal){
        localStorage.setItem('list',JSON.stringify(newVal))
      }
    },
    created () {
    },
    computed:{
    },
    methods:{
      add(obj){
        console.log(obj,999);
        this.list.push(obj)

      },
      delHandle(id){
        console.log(id,9999);
        this.list=this.list.filter(item=>item.id!=id)
      }
    }
}
</script>
<style lang='less'  scoped>
 
</style>